实战(移动端)

(一) viewport 设置

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>

(二) 重置样式

body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select 
{
    margin: 0;
    padding: 0;
}
body {
    font: 12px "宋体", "Arial Narrow", HELVETICA;
    background: #fff;
    -webkit-text-size-adjust: 100%;
    touch-action: none;
    line-height: 1; 
}
a {
    color: #172c45;
    text-decoration: none
}
a:hover {
    color: #cd0200;
    text-decoration: underline
}
em {
    font-style: normal
}
ul,li {
    list-style: none
}
img {
    border: 0;
    vertical-align: middle
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
p {
    word-wrap: break-word
}
a:hover {
    text-decoration: none;
}

(三) 公共样式

/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1;
}
ul,li { list-style: none; }
body {  
    font: 12px "宋体", "Arial Narrow", HELVETICA;
    background: #fff;
    -webkit-text-size-adjust: 100%;
    touch-action: none;
    line-height: 1; 
}
a {
    color: #172c45;
    text-decoration: none
}
a:hover {
    color: #cd0200;
    text-decoration: underline
}
img {display: block;}
/* 公共样式 */ 
/* 文本居中 */
.tac { text-align: center; }
/* 相对定位 */
.rel { position: relative; }
/* 绝对定位 */
.abs{ position: absolute }
/* 固定定位 */
.fixed { position: fixed; }
/* 隐藏 */
.dsn { display: none; }
/* 宽度100% */
.w100p { width: 100%; }
.h100p { height: 100%; }

/* 颜色 */
.fff { color: #fff; }
.bg-fff { background-color: #fff; }
/* 主题色 */
.base { color: #f03d37; }
.bg-base { background-color: #f03d37; }

/* 字体 */
.f10 { font-size: 10px; }
.f12 { font-size: 12px; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; } 
.f20 { font-size: 20px; }
.f22 { font-size: 22px; }
.f24 { font-size: 24px; }
.f26 { font-size: 26px; }
.f28 { font-size: 28px; }
.f30 { font-size: 30px; }
.f32 { font-size: 32px; }
.f34 { font-size: 34px; }
.f36 { font-size: 36px; } 

/* 弹性盒子 */
.flex { display: flex; }
.jc-c { justify-content: center; }
.jc-sb { justify-content: space-between; }
.jc-sa { justify-content: space-around; }
.aic { align-items: center; }
.fcc {display: flex;justify-content: center;align-items: center;}
/* 盒子排成一列 */
.fdc { flex-direction: column; }
/* 剩余空间分配 */
.fg1 { flex-grow: 1; }
.fww {flex-wrap: wrap;}

/* margin */
.mt-5 {margin-top: 5px;}
.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-25 {margin-top: 25px;}
.mt-30 {margin-top: 30px;}
.ml-5 {margin-left: 5px;}
.ml-10 {margin-left: 10px;}
.ml-15 {margin-left: 15px;}
.ml-20 {margin-left: 20px;}
.ml-25 {margin-left: 25px;}
.ml-30 {margin-left: 30px;}
.mr-5 {margin-right: 5px;}
.mr-10 {margin-right: 10px;}
.mr-15 {margin-right: 15px;}
.mr-20 {margin-right: 20px;}
.mr-25 {margin-right: 25px;}
.mr-30 {margin-right: 30px;}
.mb-5 {margin-bottom: 5px;}
.mb-10 {margin-bottom: 10px;}
.mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}
.mb-25 {margin-bottom: 25px;}
.mb-30 {margin-bottom: 30px;}

/* padding */
.pt-5 {padding-top: 5px;}
.pt-10 {padding-top: 10px;}
.pt-15 {padding-top: 15px;}
.pt-20 {padding-top: 20px;}
.pt-25 {padding-top: 25px;}
.pt-30 {padding-top: 30px;}
.pl-5 {padding-left: 5px;}
.pl-10 {padding-left: 10px;}
.pl-15 {padding-left: 15px;}
.pl-20 {padding-left: 20px;}
.pl-25 {padding-left: 25px;}
.pl-30 {padding-left: 30px;}
.pr-5 {padding-right: 5px;}
.pr-10 {padding-right: 10px;}
.pr-15 {padding-right: 15px;}
.pr-20 {padding-right: 20px;}
.pr-25 {padding-right: 25px;}
.pr-30 {padding-right: 30px;}
.pb-5 {padding-bottom: 5px;}
.pb-10 {padding-bottom: 10px;}
.pb-15 {padding-bottom: 15px;}
.pb-20 {padding-bottom: 20px;}
.pb-25 {padding-bottom: 25px;}
.pb-30 {padding-bottom: 30px;}

(四) 使用预处理语言less(scss)

使用less嵌套写法, 对页面轻松分块, 方便维护

  1. vscode安装easy less插件
  2. 修改编译输出位置
  3. 写代码的时候, 新建一个less文件夹, 把less文件放在一起, 新建一个css文件夹用来存放编译后的css文件

(五) 字体图标

阿里字体图标库: https://www.iconfont.cn/

  1. 使用在线地址
  2. 下载到本地

(六) 编写静态页面技巧

1.后代选择器的问题

  1. 要分块, 每一块用一个div包起来, 写上注释
  2. 要使用后代选择器, 不然容易冲突
  3. 选择器的层级尽量不要超过3层

2.命名技巧

  1. 尽量用英文

  2. 常用英文单词

    中文英文中文英文
    1. 头部 header3. 底部 footer4. 导航 nav
    5. 标志 logo6. 列表(ul) list xxx-list7. 列表选项(li) item8. 左 left l
    8. 中间 center9. 右边 right r10. 侧边栏 side11. 菜单 menu
    12. 标题 title13. 文本包裹层 text-box14. 文本 text15. 多个文本 text1, text2, text3
    16. 按钮 btn17. 图片 img18. 输入框 inp19. 横幅 banner
    20. 轮播图 swiper21. 内容 content22. 图标 icon23. 链接 link